import React from 'react';
import { EditableExcelTable, EditableExcelTableRef } from '@/components/editable-excel-table';
import type { TColumn, TDataRow, ExcelSheetData } from '@/components/editable-excel-table';

type C = TColumn;

// 基于新版 type.ts 的演示数据（ExcelSheet）
const excelSheet: ExcelSheetData<C> = {
    columns: [
        { title: '医院名称', dataIndex: 'name', required: false, type: 'text' },
        { title: 'CRC人员数量', dataIndex: 'age', required: true, type: 'text' },
        {
            title: '快启时间（天）',
            required: true,
            dataIndex: 'address',
            type: 'select',
            options: ['0-10', '10-20', '20以上', '无', 'NA'],
        },
        { title: '独立主导SSU', required: true, dataIndex: 'role', type: 'select', options: ['有', '无', 'NA'] },
        {
            title: '招募资源',
            required: true,
            dataIndex: 'role2',
            type: 'select',
            options: [
                '有',
                '无',
                '有（含健康人）',
                '（健健康健康康健康健康有健康健康健康健康有健康健康有健健康健康康健康健康含健康健康健康人）',
                'NA',
            ],
        },
    ],
    data: [
        {
            name: `lineerror2`,
            age: 11,
            address: 'lineerror2',
            role: 'user',
            _errors: [{ errorMessage: 'lineerror2' }],
        } as unknown as TDataRow<C>,
    ].concat(
        Array.from({ length: 500 })
            .map(
                (_, i) =>
                    ({
                        name: `User ${i + 1}`,
                        age: String(20 + (i % 30)),
                        address: String(20 + (i % 30)),
                        role: i % 2 === 0 ? '有' : '无',
                        _errors: i % 2 === 0 ? [{ column: 1, errorMessage: 'Name is required' + i }] : undefined,
                    } as TDataRow<C>)
            )
            .concat([
                {
                    name: `lineerror`,
                    age: 11,
                    address: 'lineerror',
                    role: 'user',
                    _errors: [{ errorMessage: 'lineerror' }],
                } as unknown as TDataRow<C>,
            ])
            .concat([
                {
                    name: `222`,
                    age: 12,
                    address: '333',
                    role: 'user',
                    _errors: [
                        { column: 1, errorMessage: 'last line error1' },
                        { column: 3, errorMessage: 'last line error2' },
                    ],
                } as unknown as TDataRow<C>,
            ])
    ),
};

export function App() {
    const [sheetData, setSheetData] = React.useState<ExcelSheetData<C>>(excelSheet);
    const editableExcelTableRef = React.useRef<EditableExcelTableRef<C>>(null);
    const [enabled, setEnabled] = React.useState(true);
    const handleClick = () => {
        console.log(editableExcelTableRef.current?.getData());
    };

    return (
        <div style={{ padding: 12 }}>
            <strong> Editable Excel Table</strong>
            <button
                onClick={() => {
                    setEnabled((bol) => !bol);
                }}
            >
                虚拟滚动当前状态：{enabled ? '开启' : '关闭'}
            </button>
            <EditableExcelTable
                ref={editableExcelTableRef}
                sheetTitle="这是一个很长的表格标题，用于演示折叠功能。这个标题包含了大量的文字内容，当文字超过100个字符时会自动启用折叠功能，用户可以通过点击展开/收起按钮来查看完整内容。这样可以保持界面的整洁性，同时又不失信息的完整性。"
                sheetTitleStyle={{
                    // backgroundColor: 'yellow',
                    // color: 'red',
                    borderBottom: '2px solid #e9ecef',
                    fontSize: '18px',
                }}
                tableBodyContainerStyle={{ height: '60vh' }}
                sheetData={sheetData}
                virtualization={{ enabled, rowHeight: 36, overscan: 18 }}
                headerActions={
                    <>
                        <button onClick={handleClick}>获取所有数据</button>
                        <button>其它操作</button>
                    </>
                }
                // editorRenderers={{
                //     text: {
                //         editableRender: ({ value, onChange }) => (
                //             <input value={value} onChange={(e) => onChange(e.target.value)} type="color" />
                //         ),
                //         readonlyRender: ({ value }) => <span>{value}</span>,
                //     },
                // }}
            />
        </div>
    );
}
